<template>
	
	<view class="goodsDetail">
		<u-navbar>
			<view class="navbar-right" slot="right">
				<u-icon name="plus" size="38" @tap="goAdd()"></u-icon>
			</view>
		</u-navbar>

		<!-- <swiper indicator-dots>
			<swiper-item v-for="(img,index) in item.swiper" :key="index">
				<image :src="img"></image>
			</swiper-item>
		</swiper> -->
		<view>
			<image :src="item.cover" class="cover"  mode="widthFix"></image>
		</view>
		<!-- 商品基础信息 -->
		<view class="goods-info">
		    <view class="u-flex">
				<view class="left">
					<view>￥{{item.price}}</view>
					<view class="goods-name lg">{{ item.name }}</view>
				</view>
		        <view class="sm lighter share" @tap="showShare = true">
		            <u-icon name="share" />
		            <text class="m-l-10">分享</text>
		        </view>
		    </view>
		
		    
		    <view class="u-flex justify-between muted xs">
		        <view>库存: {{ item.total_stock }}</view>
		        <view>销量: {{ item.sell_num }}</view>
		        <view>浏览量: {{ item.hit }}</view>
		    </view>
		</view>
		<view>
			<view class="cartNum" @tap.stop="">
				<u-number-box v-model="item.number" :asyncChange="true" :min="1"
					@change="cartCountChange(index,item.number)" />
			</view>
		</view>
		<view class="content" v-html="item.content"></view>

		<view class="navigation">
			<view class="left">
				<!-- <navigator open-type="navigate" url="/pages/chat/chat" class="item">
					<u-icon name="server-fill" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</navigator> -->
				<navigator open-type="switchTab" url="/pages/index/index" class="item">
					<u-icon name="home" :size="26" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</navigator>
				<navigator open-type="switchTab" url="/pages/cart/cart" class="item car">
					<u-badge class="car-num" value="9" type="error"></u-badge>
					<u-icon name="shopping-cart" :size="28" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</navigator>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCart(1)">加入购物车</view>
				<view class="buy btn u-line-1" @click="addBuy(1)">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetail
	} from "@/api/api.js"
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				id: 0,
				item: []
			}
		},
		computed: {
			...mapState(['shopList']),
		},
		methods: {
			...mapMutations(['addToCart','setShopList']),
			async getData() {
				var data = {
					id: this.id,
				}
				await getGoodsDetail(data).then((res) => {
					this.item = res
				}).catch(() => {

				})
			},

			// 添加购物车
			addCart(num) {
				let product = {
					id: this.id,
					check: true,
					num
				};
				this.addToCart(product);
				uni.$u.toast('添加成功');
				// uni.switchTab({
				// 	url: '/pages/cart/cart'
				// })
			},
			// 立即购买
			addBuy(num) {
				let product = {
					id: this.id,
					num
				};
				// this.addToCart(product);
				this.setShopList({ shopList: []});
				uni.$u.toast('清空');
				// uni.switchTab({
				// 	url: '/pages/cart/cart'
				// })
			},
		},
		onLoad(options) {
			this.id = parseInt(options.id)
			this.getData()
		}
	}
</script>

<style lang="scss">
	.goodsDetail {
		swiper {
			height: 600rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		

		.cover {
			width: 100%;
			height: auto;
		}

		.goods-info{

		}

		.content {
			margin-top: 20rpx;
		}

		.navigation {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			margin-top: 100rpx;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx 0;
			justify-content: space-between;
			text-align: center;

			.left {
				display: flex;
				align-items: center;
				font-size: 20rpx;

				.item {
					margin: 0 20rpx;

					&.car {
						text-align: center;
						position: relative;

						.car-num {
							position: absolute;
							// top: -10rpx;
							right: -10rpx;
							z-index: 10;
						}
					}
				}
			}

			.right {
				flex:1;
				display: flex;
				font-size: 28rpx;
				align-items: center;

				.btn {
					width: 50%;
					line-height: 72rpx;
					padding: 0 30rpx;
					border-radius: 36rpx;
					color: #ffffff;
					margin-right: 20rpx;
				}

				.cart {
					background-color: #ed3f14;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}


	}
</style>